<template>
  <div class="businessProcess">
    <div class="header">
      <van-nav-bar title="流程操作端" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <section class="section">
      <div class="registration_from">
        <p>客户选择</p>
        <div class="xiala">
          <input type="text" placeholder="选择办理人发送办理流程" :value="radioData"  readonly="readonly" @click="addressShow()">
          <img src="../../assets/images/greenFinance/12.png">
        </div>
      </div>
      <div class="registration_from">
        <h6>（单选）已添加流程</h6>
         <div class="registration_from_div">
               <div class="gudong">
                 <van-radio-group v-model="resultInfo">
                   <ul class="">
                     <li v-for="(item, index) in shareholderInfoList" class="scgd">
                       <van-radio :name="item.id" checked-color="#07c160">{{item.flowName}}</van-radio>
                     </li>
                   </ul>
                 </van-radio-group>
               </div>
         </div>
      </div>
    </section>
    <footer>
      <div class="foot">
        <div class="footer_left" @click="toRegistration()" v-show="Settlement">
           完成结算
        </div>
        <div class="footer_left1" v-show="Settlement1">
          已结算
        </div>
        <div class="footer_right" @click="sendShow()" v-model="showSendIng">
            发送
        </div>
      </div>

    </footer>

    <van-popup v-model="show">
      <van-radio-group v-model="radioData">
        <p class="p1">办理意向</p>
        <ul class="yi">
          <li v-for="(item, index) in list">
            <van-radio :name="item.legal_person" checked-color="#07c160">{{item.legal_person}}</van-radio>
          </li>
        </ul>
        <div class="ok" @click="OK()">确定</div>
      </van-radio-group>
    </van-popup>
  </div>
</template>

<script>
    export default {
        name: "businessProcess",
      data() {
        return {
          show:false,
          list: [],
          shareholderInfoList: [],
          checked: true,
          resultInfo:'',
          Settlement:true,
          Settlement1:false,
          radioData:'',
        }
      },
      mounted() {
          this.getCustomer()
          this.getBusinessRegisterFlow()
      },
      methods: {
        //返回
        onClickLeft() {
          this.$router.go(-1);
        },
        addressShow(){
          this.show=true
        },
        OK(){
          this.show=false
        },
        //获取客户
        async getCustomer(){
          const res = await this.$axios.post(this.$api.customerData);
          if (res.success) {
             this.list=res.data
          } else {
            this.$toast(res.msg);
          }
        },
        //获取查询流程
        async getBusinessRegisterFlow(){
          const res = await this.$axios.post(this.$api.businessRegisterFlowData);
          if (res.success) {
            this.shareholderInfoList=res.data
          } else {
            this.$toast(res.msg);
          }
        },
        //发送
        async sendShow(){
          let  arr=[];
          this.list.forEach((item,index)=>{
            if(item.legal_person==this.radioData){
              arr.push(item.sl_commission_id);
              arr.push(item.phone);
            };
          });
          let params = {
            sl_commission_id:arr[0],
            phone:arr[1],
            flow_id:this.resultInfo
          };
          const res = await this.$axios.post(this.$api.sendCustomerData, params);
          if (res.success) {
            this.$toast(res.msg);
            this.resultInfo=''
            this.radioData=''
          } else {
            this.$toast(res.msg);
          }
        },


        //已结算

        async toRegistration(){
          let  arr=[];
          this.list.forEach((item,index)=>{
            if(item.legal_person==this.radioData){
             arr.push(item.sl_commission_business_id);
            };
          });
          let params = {
            sl_commission_business_id: arr.join(''),
          };
          const res = await this.$axios.post(this.$api.sendCustomerlist, params);
          if (res.success) {
            this.Settlement=false;
            this.Settlement1=true;
          } else {
            this.Settlement=true;
            this.Settlement1=false;
          }
        },

      }
    }
</script>

<style scoped>
  .businessProcess{width: 100%;background-color: #fff;height: 100vh;}
   section{margin-top: 0.46rem;}
  .section{padding-top: 0.15rem;}
  .registration_from{overflow: hidden;width: 100%;line-height: 0.45rem;}
  .registration_from p{float: left;width: 23%;text-align: center;}
  .registration_from h6{padding: 0 0.23rem 0 0.15rem;}
  .xiala{width: 69%;border-radius: 0.05rem;float: right;overflow: hidden;background-color: #f2f2f2;margin-bottom: 0.1rem;margin-right: 0.21rem;}
  .xiala input{float: left;height: 0.4rem;width: 87%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;}
  .xiala img{float: left;width: 0.15rem;margin-top: 0.15rem;}
  .p1{text-align: center;}
  .van-popup{width: 80%;border-radius: 0.05rem;padding: 0.2rem 0;}
  .scgd{overflow: hidden;margin: 0.1rem 0 0;line-height: 0.2rem;border: 1px solid #e6e6e6;border-radius: 0.05rem;padding: 0.1rem;}
  .gudong{margin: 0 0.12rem;}
  footer{width: 100%;padding: 0.2rem 0;background-color: #fff;}
  .foot{overflow: hidden;width: 90%;margin: 0 auto;height: 0.42rem;text-align: center;}
  .footer_left{width: 50%;float: left;border: 1px solid #01bf47;line-height: 0.4rem;color:#01bf47;border-bottom-left-radius: 0.05rem; border-top-left-radius:  0.05rem;}
  .footer_left1{width: 50%;float: left;background-color: #d9d9d9;line-height: 0.42rem;color:#808080;border-bottom-left-radius: 0.05rem; border-top-left-radius:  0.05rem;}
  .footer_right{width: 50%;float: left;background-color:#01bf47; line-height: 0.42rem;color: #fff;border-top-right-radius: 0.05rem;border-bottom-right-radius: 0.05rem;}
   .yi{margin: 0.1rem auto;width: 90%;}
   .yi li{line-height: 0.2rem;padding:0.02rem 0.1rem;}
  .registration_from_div{background-color: #fff;}
  .registration_from h6 span{float: right}
  .p3{line-height: 0.8rem;text-align: center;font-size: 0.16rem;}
  .ok{width:34%;margin: 0 auto;line-height: 0.3rem;background-color:#01bf47;color: #fff;text-align: center;border-radius: 0.05rem;  }
</style>
